<template>
  <div class="edu-page-warp">
    <el-card shadow="never" style="margin-bottom:16px;">
      <div class="edu-page-title" style="margin-bottom:16px;">{{$t('exam.myExam')}}</div>
      <el-form :inline="true" ref="queryParams" class="bg-white">
        <el-row style="margin-bottom:16px;margin-left:16px;">
          <el-col>
            <img
              src="/static/images/manage-active.png"
              alt
              style="width:32px;height: 32px;margin-right:16px;"
            >
            <span style="font-size:24px;vertical-align: top;">{{studentName}}</span>
          </el-col>
        </el-row>
        <hr style="height:1px;border:none;border-top:1px solid #dadcde;">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('exam.studentId')">
              <span>{{studentId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('exam.name')">
              <span>{{studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('exam.grade')">
              <span>{{grade}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('exam.college')">
              <span>{{facultyI18n}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('exam.major')">
              <span>{{majorI18n}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table
        stripe
        :data="examinationStudents"
        size="mini"
        width="100%"
        style="margin-top:16px;
               margin-bottom:24px;"
        tooltip-effect="light"
      >
        <el-table-column :label="$t('message.order')" type="index" align="left"></el-table-column>
        <el-table-column :label="$t('examinationLevel.subject')" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.subjectI18n}}</template>
        </el-table-column>
        <el-table-column :label="$t('examinationLevel.examTime')" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.examTime}}</template>
        </el-table-column>
        <el-table-column :label="$t('examinationLevel.examAddress')" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.examAddress}}</template>
        </el-table-column>
        <el-table-column :label="$t('examinationList.sugCourses')" show-overflow-tooltip>
          <template slot-scope="scope" v-if="scope.row.resultOpen == 1">{{scope.row.sugCourses}}</template>
        </el-table-column>
        <el-table-column :label="$t('message.remark')" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.remark}}</template>
        </el-table-column>
        <el-table-column :label="$t('exam.notice')" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.notice}}</template>
        </el-table-column>
        <el-table-column :label="$t('examinationLevel.result')">
          <template
            slot-scope="scope"
            v-if="scope.row.resultOpen == 1"
          >{{scope.row.examResultsI18n}}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { mapState } from "vuex";
import examinationStudentsApi from "common/src/api/welcomeService/examinationStudents";

/**
 * 分级考试
 */
export default {
  name: "MyExam",
  data() {
    return {
      studentId: "",
      studentName: "",
      grade: "",
      facultyI18n: "",
      majorI18n: "",
      examinationStudents: []
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser,
      uid: state => state.session.uid
    })
  },
  methods: {
    init() {
      examinationStudentsApi.getExam().then(res => {
        if (res.code == 200 && res.data.length != 0 ) {
          this.studentId = res.data[0].studentId;
          this.studentName = res.data[0].studentName;
          this.grade = res.data[0].grade;
          this.facultyI18n = res.data[0].facultyI18n;
          this.majorI18n = res.data[0].majorI18n;
          this.examinationStudents = res.data.filter(c => 1 == c.examOpen);
        } else {
          let studentId;
          if (this.mockUser) {
            studentId = this.mockUser.uid;
          } else {
            studentId = this.uid;
          }
          examinationStudentsApi.findByStudentId(studentId).then(res => {
            if (res.code == 200 && res.data) {
              this.studentId = studentId;
              this.studentName = res.data.name;
              this.grade = res.data.grade;
              this.facultyI18n = res.data.facultyI18n;
              this.majorI18n = res.data.professionI18n;
            } else {
              this.studentId = studentId;
              this.studentName = "";
              this.grade = "";
              this.facultyI18n = "";
              this.majorI18n = "";
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.createForm {
  .line {
    text-align: center;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
.edu-page-warp .level-button {
  min-width: 0px;
  padding: 0 8px;
  height: 24px;
}
</style>
